<template>
	<view class="sharegain">
		<u-navbar
			title="创建分享"
			:back-icon-size="28"
			back-icon-color="#000000"
			:title-size="28"
			:border-bottom="false"
			:back-text-style="{ color: '#000000', fontSize: '26rpx' }"
			title-color="#000000"
		></u-navbar>
		<view class="top_header u-flex u-row-between">
			<view class="u-flex">
				<u-icon name="rmb" size="30" color="#FAD111" style="padding-right: 10rpx;"></u-icon>
				<view>
					奖励收益预估：
					<text style="color: #CEAE7A">￥{{ someitem.someitem.money }}</text>
				</view>
			</view>
			<view class="" @click="gocourse">
				<text style="color: #89788A;">赚钱小技巧</text>
				<u-icon name="arrow-right" color="#787882" size="30"></u-icon>
			</view>
		</view>
		<view class="imgbox">
			<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox class="one" v-model="onechecked" :name="baseurl" shape="circle" active-color="red">
					<view class="oneview" style="width: 236rpx;height: 380rpx; ">
						<image :src="oneurl" mode="scaleToFill" class="oneimg" style="width: 236rpx;height: 262rpx;"></image>
						<image src="/static/image/couponbg.png" mode="" class="bg" style="width: 236rpx;height: 380rpx;"></image>
						<view class="couponprice">
							<view class="">券后价</view>
							<view class="">
								<text>￥</text>
								{{ someitem.someitem.zk_final_price }}
							</view>
						</view>
						<view class="pricebox">
							<view class="">
								<text>￥</text>
								{{ someitem.someitem.zk_final_price }}
								<text style="text-decoration: line-through;">￥{{ someitem.someitem.reserve_price }}</text>
							</view>
							<view class="couponbg2" v-if="someitem.someitem.coupon_amount != ''">
								<image src="/static/image/couponbg2.png" mode="" class="couimg" style="width: 80rpx;height: 40rpx;"></image>
								<view class="couponbg2_t">
									<text>￥ {{ someitem.someitem.coupon_amount }} 元劵</text>
								</view>
							</view>
						</view>
						<view class="title">
							<text style="border: 2rpx solid #B55F70;color: #B55F70;border-radius: 5rpx;">{{ someitem.someitem.user_type == 0 ? '淘宝' : '天猫' }}</text>
							{{ someitem.someitem.title }}
						</view>
						<view class="base64">
							<image :src="base64" mode="" style="width: 140rpx;height: 140rpx;"></image>
							<!-- <view class="">长按或扫码购买</view> -->
						</view>
					</view>
				</u-checkbox>
				<u-checkbox class="other" v-for="(item, index) in imglist" :key="index" v-model="item.checked" :name="item.name" shape="circle" active-color="red">
					<u-image :src="item.name" :width="184" :height="184"></u-image>
				</u-checkbox>
			</u-checkbox-group>
			<u-line color="#DFDFDF" border-style="dashed" margin="16rpx 0"></u-line>
			<view class="imgbot u-flex u-row-between u-col-center">
				<view class="">
					已选
					<text class="u-p-10">{{ checkList.length }}</text>
					张
				</view>
				<view class="shareimg" @click="openpop">分享图片</view>
			</view>
		</view>
		<view class="textbox">
			<view class="title">下单文案</view>
			<view class="text_main">
				<view class="title u-line-2">{{ someitem.someitem.title }}</view>
				<view class="main">
					<view class="">【原价】{{ someitem.someitem.reserve_price }}</view>
					<view class="">【券后价】{{ someitem.someitem.zk_final_price }}</view>
					<view class="">-----------------</view>
					{{ friendtext }} 去【淘宝】下单
				</view>
			</view>
			<view class="u-flex u-p-t-15">
				<u-line color="#DFDFDF" border-style="dashed" margin="16rpx 0" length="466rpx"></u-line>
				<view class="sharetext" @click="docopy">复制下单文案</view>
			</view>
		</view>
		<u-popup v-model="popshow" mode="bottom" border-radius="13">
			<view class="popbox">
				<view class="poptitle">分享给朋友</view>
				<view class="popbot">
					<view class="" style="text-align: center;" @click="uploadbase(1)">
						<u-icon name="weixin-circle-fill" color="#59C12C" size="100"></u-icon>
						<view class="">微信好友</view>
					</view>
					<view class="" style="text-align: center;" @click="uploadbase(2)">
						<u-icon name="moments-circel-fill" color="#59C12C" size="100"></u-icon>
						<view class="">微信朋友圈</view>
					</view>
					<view class="" style="text-align: center;" @click="uploadbase('a')">
						<u-icon name="photo-fill" color="#2979ff" size="100"></u-icon>
						<view class="">保存到相册</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="tipsshow" mode="center" border-radius="13" width="550" height="370">
			<view class="tipsbox">
				<view class="title">去朋友圈分享</view>
				<view class="main">
					<view class="line">
						<view class="dot"></view>
						分享文案已自动复制
					</view>
					<view class="line">
						<view class="dot"></view>
						图片已自动保存到手机相册
					</view>
				</view>
				<view class="openweixin" @click="opentips">打开微信</view>
			</view>
		</u-popup>
		<canvas canvas-id="qrcode" style="width: 354px;height: 354px;" class="canvas-hide" />
		<canvas canvas-id="myCanvas" style="width: 710rpx;height: 1086rpx;backgroundColor: #FFFFFF" class="canvas-hide"></canvas>
		<!-- <view class="" style="width: 100%;height: 200rpx;"></view> -->
		<view class="bot"><view class="bot_btn" @click="openpop">一键分享 图片和推广文案</view></view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import uQRCode from '@/js_sdk/uqrcode/uqrcode.js';
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
// import { pathToBase64, base64ToPath } from '@/js_sdk/image-tools/index.js';
export default {
	name: 'sharegain',
	data() {
		return {
			popshow: false,
			tipsshow: false,
			oneurl: '',
			base64: '',
			onechecked: false,
			checkList: [],
			friendtext: '',
			qrurl: '',
			imglist: [
				// {
				// 	name:
				// 		'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602848743210&di=ecf194ba4634f2e4eb55a4d37843a9b5&imgtype=0&src=http%3A%2F%2Fpics2.baidu.com%2Ffeed%2Fbd315c6034a85edf81702f204ba7a225dc54752a.jpeg%3Ftoken%3D40ea367f6b2ef995eaa6f5faf705a7d4',
				// 	checked: false,
				// }
			],
			someitem: {},
			createbase64: '',
			path: '',
			baseurl: '',
			count: 0
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		if (option) {
			this.someitem = JSON.parse(decodeURIComponent(option.item));
			console.log(this.someitem);
			this.makeshare(this.someitem.someitem.item_id);
		}
	},
	//挂载开始之前被调用
	beforeMount() {},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		openpop() {
			this.popshow = true;
		},
		uploadbase(val) {
			let that = this;
			// #ifdef H5
			this.$u.api
				.douploadbase({
					file: that.createbase64
				})
				.then(res => {
					// console.log(res);
					if (res.code == 200) {
						that.baseurl = 'https://' + res.data.url;
						if (val == 'a') {
							// console.log('baseurl', this.baseurl);
							this.checkList[0] = this.baseurl;
							for (let i in this.checkList) {
								console.log(this.checkList[i]);
								this.dosave(this.checkList[i]);
							}
						} else {
							that.doshare(val);
						}
					}
				})
				.catch(err => {
					console.log(err);
				});
			// #endif
			// #ifndef H5
			uni.uploadFile({
				url: 'https://app.letuilm.com//api/upload',
				filePath: that.createbase64,
				name: 'file',
				success: function(uploadFileRes) {
					that.baseurl = 'https://' + JSON.parse(uploadFileRes.data).data.url;
					if (val == 'a') {
						// console.log('baseurl', this.baseurl);
						this.checkList[0] = this.baseurl;
						for (let i in this.checkList) {
							// console.log(this.checkList[i]);
							this.dosave(this.checkList[i]);
						}
					} else {
						that.doshare(val);
					}
				},
				fail: function(err) {
					console.log('err'.err);
				}
			});
			// #endif
		},
		doshare(val) {
			if (val == 1) {
				//分享单图给朋友
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 2,
					imageUrl: this.baseurl,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			} else {
				//分享到朋友圈
				// console.log('baseurl', this.baseurl);
				this.checkList[0] = this.baseurl;
				for (let i in this.checkList) {
					// console.log(this.checkList[i]);
					this.dosave(this.checkList[i]);
				}
				this.docopy();
				this.tipsshow = true;
			}
		},
		opentips() {
			this.tipsshow = false;
			// #ifdef APP-PLUS
			if (plus.runtime.isApplicationExist({ pname: 'com.tencent.mm', action: 'weixin://' })) {
				console.log('微信应用已安装');
				plus.runtime.openURL('weixin://');
			} else {
				console.log('微信应用未安装');
				uni.showModal({
					content: '本机未检测到微信客户端，请先安装微信进行分享',
					success: function(res) {}
				});
			}
			// #endif
		},
		dosave(url) {
			let that = this;
			// #ifdef  MP
			// console.log('-----', url);
			uni.getSetting({
				success(res) {
					uni.downloadFile({
						url: url,
						success: res => {
							if (res.statusCode === 200) {
								console.log('MP', res.tempFilePath);
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: res => {
										that.$refs.uToast.show({
											title: '保存成功',
											type: 'success'
										});
									},
									fail: err => {
										that.$refs.uToast.show({
											title: '保存失败',
											type: 'error'
										});
									}
								});
							}
						},
						fail: res => {
							that.$refs.uToast.show({
								title: '下载失败',
								type: 'error'
							});
						}
					});
				}
			});
			// #endif

			// #ifdef APP-PLUS
			uni.getImageInfo({
				src: url,
				success(image) {
					console.log('----app', image.path);
					uni.saveImageToPhotosAlbum({
						filePath: image.path,
						success: () => {
							// that.$refs.uToast.show({
							// 	title: '保存成功',
							// 	type: 'success'
							// });
						}
					});
				}
			});
			// #endif

			// #ifdef H5
			var canvas = document.createElement('canvas');
			var img = document.createElement('img');
			img.onload = function(e) {
				canvas.width = img.width;
				canvas.height = img.height;
				var context = canvas.getContext('2d');
				context.drawImage(img, 0, 0, img.width, img.height);
				canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
				canvas.toBlob(blob => {
					let link = document.createElement('a');
					link.href = window.URL.createObjectURL(blob);
					link.download = '';
					link.click();
				}, 'image/jpeg');
			};
			img.setAttribute('crossOrigin', 'Anonymous');
			img.src = url;

			// this.$refs.uToast.show({
			// 	title: '保存成功',
			// 	type: 'success'
			// });
			// #endif
			this.count++;
			if (this.count == this.checkList.length) {
				this.$refs.uToast.show({
					title: '图片已保存到本地~',
					type: 'success'
				});
			}
		},
		makeimg() {
			let _this = this;
			let phoneWith = this.phoneWith;
			// let scale = (phoneWith * 0.9) / 940;
			let scale = 1;
			// console.log(scale);

			uni.showLoading({
				mask: true,
				title: '生成中...'
			});
			// let oneurl = this.oneurl;
			let base64 = this.base64;
			_this.downloadImages(this.oneurl, function(res) {
				console.log(res);
				let oneurl = res;
				_this.drawPost(
					'myCanvas',
					356 * scale,
					543 * scale,
					[
						{
							type: 'image',
							url: oneurl,
							x: 0,
							y: 0,
							width: 356 * scale,
							height: 376 * scale,
							isCircle: false
						},
						{
							type: 'image',
							url: '/static/image/couponbg.png',
							x: 0,
							y: 0,
							width: 356 * scale,
							height: 543 * scale,
							isCircle: false
						},
						{
							type: 'text',
							text: '券后价',
							textAlign: 'left',
							lineAlign: 'TOP',
							x: 290 * scale,
							y: 340 * scale,
							color: 'white',
							size: 16,
							bold: true
						},
						{
							type: 'text',
							text: '￥',
							textAlign: 'left',
							lineAlign: 'TOP',
							x: 286 * scale,
							y: 360 * scale,
							color: 'white',
							size: 13,
							bold: true
						},
						{
							type: 'text',
							text: _this.someitem.someitem.zk_final_price,
							textAlign: 'left',
							lineAlign: 'TOP',
							x: 300 * scale,
							y: 360 * scale,
							color: 'white',
							size: 18,
							bold: true
						},
						{
							type: 'text',
							text: '￥',
							textAlign: 'left',
							lineAlign: 'TOP',
							x: 5 * scale,
							y: 430 * scale,
							color: 'red',
							size: 14,
							bold: true
						},
						{
							type: 'text',
							text: _this.someitem.someitem.zk_final_price,
							textAlign: 'left',
							lineAlign: 'TOP',
							x: 20 * scale,
							y: 430 * scale,
							color: 'red',
							size: 24,
							bold: true
						},
						{
							type: 'text',
							text: '￥' + _this.someitem.someitem.reserve_price,
							textAlign: 'left',
							lineAlign: 'TOP',
							x: 80 * scale,
							y: 430 * scale,
							color: '#6A6A6A',
							size: 14,
							bold: true
						},
						{
							type: 'line',
							width: 45,
							x: 80 * scale,
							y: 425 * scale,
							color: '#6A6A6A'
						},
						{
							type: 'text',
							text: _this.someitem.someitem.title,
							textAlign: 'left',
							lineAlign: 'TOP',
							x: 13 * scale,
							y: 460 * scale,
							color: '#6A6A6A',
							size: 14,
							bold: true
						},
						{
							type: 'image',
							url: base64,
							x: 250,
							y: 415,
							width: 80 * scale,
							height: 80 * scale,
							isCircle: false
						}
					],
					data => {
						// console.log('---1', data);
						// if (_this.someitem.someitem.coupon_amount == '') {
						// 	base64ToPath(data)
						// 		.then(path => {
						// 			console.log('path', path);
						// 		})
						// 		.catch(error => {
						// 			console.error('error', error);
						// 		});
						// }
					}
				);
				if (_this.someitem.someitem.coupon_amount != '') {
					_this.drawPost(
						'myCanvas',
						356 * scale,
						543 * scale,
						[
							{
								type: 'image',
								url: '/static/image/couponbg2.png',
								x: 140 * scale,
								y: 400 * scale,
								width: 80 * scale,
								height: 40 * scale,
								isCircle: false
							},
							{
								type: 'text',
								text: '￥',
								textAlign: 'left',
								lineAlign: 'TOP',
								x: 147 * scale,
								y: 427 * scale,
								color: 'white',
								size: 12,
								bold: true
							},
							{
								type: 'text',
								text: _this.someitem.someitem.coupon_amount + '元券',
								textAlign: 'left',
								lineAlign: 'TOP',
								x: 160 * scale,
								y: 427 * scale,
								color: 'white',
								size: 14,
								bold: true
							}
						],
						data => {
							console.log('---2', data);
							// base64ToPath(data)
							// 	.then(path => {
							// 		console.log('2path', path);
							// 	})
							// 	.catch(error => {
							// 		console.error('error', error);
							// 	});
						}
					);
				}
			});
		},
		// canvas绘画封装
		drawPost: function(id, width, height, options, callback) {
			const ctx = uni.createCanvasContext(id);
			let that = this;
			// console.log('ctx', ctx);
			for (let i = 0; i < options.length; i++) {
				let setting = options[i];
				if (setting.type == 'image') {
					if (setting.isCircle) {
						let x = setting.x + setting.width / 2;
						let y = setting.y + setting.height / 2;
						let r = setting.height / 2;
						ctx.save();
						ctx.beginPath();
						ctx.arc(x, y, r, 0, 2 * Math.PI);
						ctx.clip();
						ctx.drawImage(setting.url, setting.x, setting.y, setting.width, setting.height);
						ctx.restore();
					} else {
						ctx.drawImage(setting.url, setting.x, setting.y, setting.width, setting.height);
					}
				} else if (setting.type == 'text') {
					let text = setting.text;
					ctx.setFontSize(setting.size);
					ctx.setFillStyle(setting.color);
					if (text.length > 15 && text.length <= 30) {
						let s_text = text.slice(0, 15);
						let e_text = text.slice(15);
						ctx.fillText(s_text, setting.x, setting.y);
						ctx.fillText(e_text, setting.x, setting.y + 23);
					} else if (text.length > 30) {
						let s_text = text.slice(0, 15);
						let t_text = text.slice(16, 30);
						let e_text = text.slice(30, 45);
						ctx.fillText(s_text, setting.x, setting.y);
						ctx.fillText(t_text, setting.x, setting.y + 23);
						ctx.fillText(e_text, setting.x, setting.y + 45);
					} else if (text.length > 45) {
						let s_text = text.slice(0, 15);
						let t_text = text.slice(16, 30);
						let e_text = text.slice(30, 41) + '...';
						ctx.fillText(s_text, setting.x, setting.y);
						ctx.fillText(t_text, setting.x, setting.y + 23);
						ctx.fillText(e_text, setting.x, setting.y + 45);
					} else {
						ctx.fillText(setting.text, setting.x, setting.y);
					}
				} else if (setting.type == 'line') {
					ctx.setFillStyle(setting.color);
					ctx.setStrokeStyle(setting.color);
					ctx.moveTo(setting.x, setting.y);
					ctx.lineTo(setting.x + setting.width, setting.y);
					ctx.stroke();
				}
			}
			ctx.draw(true, function(e) {
				// console.log('e', e);
				uni.hideLoading();
				setTimeout(() => {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: width,
						height: height,
						quality: 1,
						canvasId: id,
						success: function(respon) {
							uni.hideLoading();
							// console.log('生成成功!');
							console.log('生成成功!', respon.tempFilePath);
							that.createbase64 = respon.tempFilePath;
							// base64ToPath(respon.tempFilePath)
							// 	.then(path => {
							// 		console.log('2path', path);
							// 		that.path=path
							// 	})
							// 	.catch(error => {
							// 		console.error('error', error);
							// 	});
							callback(respon.tempFilePath);
						},
						fail: function(res) {
							console.log('fail', res);
							uni.hideLoading();
							uni.showToast({
								title: '生成失败',
								icon: 'none'
							});
						}
					});
				}, 200);
			});
		},
		// 缓存本地
		downloadImages: function(url, callback) {
			uni.downloadFile({
				url: url,
				success: res => {
					// console.log('downloadFile', res);
					if (res.statusCode === 200) {
						callback(res.tempFilePath);
					}
				},
				fail: res => {
					uni.hideLoading();
					app.errornet('生成失败');
				}
			});
		},
		docopy() {
			let str = this.someitem.someitem.title + '\n';
			str += `【原价】` + this.someitem.someitem.reserve_price + '\n';
			str += `【券后价】` + this.someitem.someitem.zk_final_price + '\n';
			str += `-----------------` + '\n';
			str += this.friendtext + `去【淘宝】下单`;

			uniCopy({
				content: str,
				success: res => {
					uni.showToast({
						title: '文案已复制~',
						icon: 'none'
					});
				},
				error: e => {
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 3000
					});
				}
			});
		},
		async make() {
			// 回调方式
			uQRCode.make({
				canvasId: 'qrcode',
				componentInstance: this,
				text: this.qrurl,
				size: 354,
				margin: 10,
				backgroundColor: '#ffffff',
				foregroundColor: '#000000',
				fileType: 'jpg',
				correctLevel: uQRCode.errorCorrectLevel.H,
				success: res => {
					// console.log(res);
					this.base64 = res;
					// this.imglist[0].name=res
					this.makeimg();
				}
			});
		},
		makeshare(id) {
			this.$u.api
				.makeshare({
					item_id: id
				})
				.then(res => {
					// console.log('-------------', res.data.sharePictInfos[0].url);
					if (res.code == 200) {
						if (res.data.shortLinkInfo.couponUrl) {
							this.qrurl = res.data.shortLinkInfo.couponUrl;
						} else {
							this.qrurl = res.data.shortLinkInfo.url;
						}
						if (res.data.taoTokenInfo.couponTokenContent) {
							this.friendtext = res.data.taoTokenInfo.couponTokenContent;
						} else {
							this.friendtext = res.data.taoTokenInfo.tokenContent;
						}
						this.oneurl = res.data.sharePictInfos[0].url;
						this.make();
						// let obj = {
						// 	name: res.data.sharePictInfos[0].url,
						// 	checked: false
						// };
						// this.imglist.push(obj);
						for (let i in this.someitem.small_images.string) {
							let object = {
								name: this.someitem.small_images.string[i],
								checked: false
							};
							this.imglist.push(object);
						}
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		gocourse() {
			uni.navigateTo({
				url: '/pages/goodsrebate/goodsinfo/sharecourse'
			});
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			console.log('00', e);
			this.checkList = e;
		},
		// 全选
		checkedAll() {
			this.list.map(val => {
				val.checked = true;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.sharegain {
	background-color: #f7f7f7;
	min-height: 100vh;
	position: relative;
	.top_header {
		width: 694rpx;
		height: 58rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		margin: 0 auto;
		padding: 0 24rpx;
	}
	.imgbox::v-deep {
		padding: 24rpx;
		background-color: #ffffff;
		width: 694rpx;
		height: 500rpx;
		margin: 0 auto;
		margin-top: 16rpx;
		.u-checkbox-group {
			display: inherit;
		}
		.u-checkbox {
			position: relative;
			.u-checkbox__icon-wrap {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 333;
			}
		}
		.one {
			width: 246rpx !important;
			height: 380rpx;
			float: left;
			margin-right: 20rpx;
			.oneview {
				position: relative;
				.bg {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}
				.oneimg {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 0;
				}
				.couponprice {
					position: absolute;
					top: 192rpx;
					right: -14rpx;
					color: white;
					font-size: 28rpx;
					z-index: 2;
					transform: scale(0.4);
				}
				.pricebox {
					width: 304rpx;
					position: absolute;
					top: 270rpx;
					left: -72rpx;
					z-index: 2;
					transform: scale(0.4);
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.couponbg2 {
					height: 40rpx;
					width: 80rpx;
					position: relative;
					color: white;
					font-size: 20rpx;
					.couimg {
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
					}
					.couponbg2_t {
						height: 40rpx;
						width: 80rpx;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 2;
					}
				}
				.title {
					position: absolute;
					/* #ifdef H5 */
					top: 276rpx;
					/* #endif */
					/* #ifndef H5 */
					top: 290rpx;
					/* #endif */
					left: -82rpx;
					z-index: 2;
					font-size: 20rpx;
					transform: scale(0.4);
				}
				.base64 {
					position: absolute;
					top: 240rpx;
					right: -26rpx;
					font-size: 20rpx;
					z-index: 2;
					transform: scale(0.4);
				}
			}
		}
		.other {
			display: inline-block;
			width: 184rpx !important;
			height: 184rpx;
			margin: 3rpx;
		}
		.imgbot {
			.shareimg {
				width: 126rpx;
				height: 38rpx;
				line-height: 38rpx;
				background-color: #ee0f1b;
				color: white;
				text-align: center;
				border-radius: 30rpx;
			}
		}
		/* #ifdef MP */
		.one {
			.u-checkbox {
				width: 246rpx !important;
				height: 380rpx;
			}
		}
		.other {
			.u-checkbox {
				width: 184rpx !important;
				height: 184rpx;
			}
		}
		/* #endif */
	}
	.textbox {
		width: 694rpx;
		height: 578rpx;
		background-color: #ffffff;
		margin: 20rpx auto 92rpx auto;
		// margin-top: 20rpx;
		.title {
			font-weight: 600;
			color: black;
			padding: 14rpx 26rpx;
		}
		.text_main {
			width: 646rpx;
			height: 434rpx;
			background-color: #f0eeee;
			border-radius: 16rpx;
			margin: 0 auto;

			.main {
				width: 502rpx;
				height: 278rpx;
				color: rgba(120, 120, 130, 100);
				font-size: 24rpx;
				text-align: left;
				margin-left: 26rpx;
			}
		}
		.sharetext {
			width: 178rpx;
			height: 38rpx;
			line-height: 38rpx;
			background-color: #ee0f1b;
			color: white;
			text-align: center;
			border-radius: 30rpx;
			font-size: 24rpx;
		}
	}
	.bot {
		width: 100%;
		height: 92rpx;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		.bot_btn {
			width: 298rpx;
			height: 48rpx;
			line-height: 48rpx;
			border-radius: 30rpx;
			background-color: rgb(238, 15, 27);
			color: rgb(255, 255, 255);
			font-size: 24rpx;
			text-align: center;
			margin: 0 auto;
		}
	}
	.canvas-hide {
		/* 1 */
		position: fixed;
		right: 100vw;
		bottom: 100vh;
		/* 2 */
		z-index: -9999;
		/* 3 */
		opacity: 0;
	}
	.popbox {
		.poptitle {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			border-bottom: 2rpx solid #e2e7ef;
		}
		.popbot {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 20rpx 0;
		}
	}
	.tipsbox {
		.title {
			margin: 40rpx auto;
			font-size: 36rpx;
			text-align: center;
		}
		.main {
			width: 480rpx;
			margin: 20rpx auto;
			.line {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 32rpx;
				margin: 15rpx 0;
				.dot {
					width: 15rpx;
					height: 15rpx;
					border-radius: 100rpx;
					background-color: #fc3949;
					margin-right: 15rpx;
				}
			}
		}
		.openweixin {
			width: 300rpx;
			height: 65rpx;
			line-height: 65rpx;
			text-align: center;
			border-radius: 30rpx;
			font-size: 36rpx;
			background-color: #fc3949;
			color: white;
			margin: 0 auto;
			margin-top: 40rpx;
		}
	}
}
</style>
